/* START tab container */

#arttabcontainer {
  display:flex;
  padding:0% 0% 0% 0%;
  /*! align-items:center; */
  text-align:center;
  justify-content:center;
  width: 90%;
}

.arttab {
  display:flex;
  padding:1vw;
  width:40vw;
  border-radius: 4vw 4vw 0px 0px;
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  border-style: solid;
  border-color: white;
  border-width: 1vw;
  color:white;
  align-items:center;
  justify-content:center;
}

.arttab:hover {
  background-color:#40a4b9;
}

.arttab:active {

}

/* Active tab (brighter color) */
.active {
  background-color:#40a4b9;
}

#arttabtext {
  font-family: "Cambria";
  font-style: Italic;
  filter: drop-shadow(0.125rem 0.125rem black);
  font-size: 200%;
}

#arttabspacer {
  padding:1vw;
}
/* END tab container */


#footercontentbox {
  margin:auto;
  /*! width: 90vw; */
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  border-radius: 30px;
  outline-style: solid;
  outline-color: white;
  outline-width: 4px;
  padding: 1%;
}

/* START Art Grid !!
*/

.artcontentbox {
  margin:auto;
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  border-radius: 5vw;
  outline-style: solid;
  outline-color: white;
  outline-width: 1vw;
  padding-top: 1vw;
  width:95%;
  padding-bottom: 7.5vmax;
}

.artgrid {
  display:grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  row-gap:0.5%;
  padding:2vw;
  /*! justify-content: center; */
  /*! object-fit: cover; */
  margin: auto;
}

.arttile {
	width:100%;
}

.otherartgrid {
  display:grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  grid-gap:2vw;
  padding:3vw;
  justify-content: center;
}

.gridimage {
max-height: 100%;
width: 85%;
}

.artotherscaption {

}

.artabouttext {
  background: rgba(200, 200, 200, 0.2);
  border-radius: 15px;
  outline-style: solid;
  outline-color: white;
  outline-width: 2px;
  padding:15px;
  
}

.artfooter {
      filter: drop-shadow(0.125rem 0.125rem black);
      font-family:"Cambria";
      font-style:Italic;
	  display:inline;
}

img {
  border: 1vw solid white;
  border-radius: 5vw;
  padding:1.25vw;
}

img:hover {

  animation-name: CMYglow;
  animation-duration:1.5s;
  animation-iteration-count: infinite;
}
/*
@keyframes CMYglow {
0%   {background-image: conic-gradient(0deg cyan, magenta, yellow, cyan);  padding:1.25vw;}
33%  {background-image: conic-gradient(120deg cyan, magenta, yellow, cyan);  padding:1.25vw;}
66%  {background-image: conic-gradient(240deg cyan, magenta, yellow, cyan);  padding:1.25vw;}
100% {background-image: conic-gradient(360deg cyan, magenta, yellow, cyan);  padding:1.25vw;}
}
*/

@keyframes CMYglow {
0%   {box-shadow: 0 0 10px 5px cyan;}
33%  {box-shadow: 0 0 10px 5px magenta;}
66%  {box-shadow: 0 0 10px 5px yellow;}
100% {box-shadow: 0 0 10px 5px cyan;}
}


/* END Art Grid !!
*/

.flexcontainer {
  display: flex;
  align-items:center;
}

.contentheadercontainer {
  display: grid;
  align-items:center;
  justify-content: center;
  /*! width: 50%; */
  grid-template-columns: auto auto auto;
  grid-gap: 7.5%;
}

.contentheadersidebox {
	width:12.5vw;
}

.contentflexcontainer {
  display: flex;
  align-items:center;
  justify-content: center;
  margin-top:1%;
  margin-bottom:3%;
}

.nothin {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  width: 90vw;
  margin: auto;
  text-align:center;
  filter: drop-shadow(0.125rem 0.125rem black);
}

.blakefall {
  justify-content: center;
  align-items: center;
  width:50vw;
  width:50vh;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

.guide {
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  text-align: center;
  border-radius: 3vw;
  outline-style: solid;
  outline-color: white;
  outline-width: 0.5vw;
  margin: auto;
  padding: 1.5vw;
/*! margin-top: 10vw; */
}

.guidesmallscreen {
  display:none;
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  text-align: center;
  border-radius: 3vw;
  outline-style: solid;
  outline-color: white;
  outline-width: 0.5vw;
  margin: auto;
  padding: 1.5vw;
  width: 35vw;
  margin-top: 3vw;
}


.guidebox {
	position: absolute;
	margin-top:5vw;
	width:15vw;
	height:15vw;
}

.contentbox {
  margin:auto;
  width: 50vw;
  text-align:center;
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  border-radius: 5vw;
  outline-style: solid;
  outline-color: white;
  outline-width: 4px;
  /*! padding: 2vw; */
}

.contenttitlecaption {
      filter: drop-shadow(0.125rem 0.125rem black);
      font-family:"Cambria";
      font-style:Italic;
      margin:1rem;
	  /*! display:inline; */
}

.contenttitleheader {
  /*! position:static; */
  align-items: flex-start;
  text-align:center;
  font-family:"Cambria";
  font-style:Italic;
  filter: drop-shadow(0.125rem 0.125rem black);
}

.contenttext {
  margin-left: 7%;
  margin-right: 7%;
  margin-top:20px;
  margin-bottom:20px;
  font-family:"Verdana";
  font-style:Italic;

  text-align:left;
  line-height: 1.5;
}


.contentbuttontext {
    filter: drop-shadow(0.125rem 0.125rem black);
}

.contentbutton {
  background-color: rgba(78, 71, 96, 1);
  border-radius: 30%;
  height:40%;
  width:20%;
  padding:2px;
  filter: drop-shadow(0.125rem 0.125rem black);
  background-image:url("media/pinkpurpcheck2.png");
  background-size:150%;
}

.contentvideo {
  margin:auto;
  align-items:center;
  margin-top:5%;
  margin-bottom:5%;
}

/* MEDIA QUERIES */

@media (max-width:600px) {
	.guidesmallscreen {
		display:block;
}	
}


@media (max-width:600px) {
	.guide {
		display:none;
}	
}


@media (min-width:900px) and (orientation: landscape) {
	.contenttitleheader {

}
}

@media (min-width:900px) {
	.contenttitlecaption {

}
}

@media (min-width:900px) and (orientation: landscape){
	.contenttitlecaption {

}
}

@media (min-width:900px) and (orientation: landscape) {
	.contentbox {
	border-radius: 2rem;
    outline-width: 0.33rem;
}
}


@media (max-width:600px){
	.contentbox {
	width:80vw;
}
}


@media (min-width:900px) and (orientation: landscape){
	.artcontentbox {
	width: 62.5vmax;
	border-radius: 3vw;
	outline-width: 0.5vw;
	}
}

@media (min-width:900px) and (orientation: landscape){
	#footercontentbox {
	width: 50vmax;
	border-radius: 3vw;
	outline-width: 0.5vw;
	}
}


@media (min-width:900px) and (orientation: landscape){
	#arttabcontainer {
	width:45vmax;
}
}

@media (max-width:900px) {
#arttabtext {

}
}

@media (min-width:900px) {
	.artgrid {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}
}

@media (min-width:900px) {
	.otherartgrid {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  grid-gap: 1.5vw;
  padding: 2vw;
}
}

@media (min-width:900px) {
.gridimage {
	/*! width:25vw; */
}
}

@media (min-width:900px) {
.artotherscaption {

}
}

@media (min-width:900px) {
img {
  border: 0.75vw solid white;
  border-radius: 3vw;
  padding: 1vw;
}
}

@media (min-width:900px) and (orientation: landscape) {
img {
  border: 0.5vw solid white;
  border-radius: 2vw;
  padding: 0.5vw;
}
}

@media (min-width:900px) and (orientation: landscape) {
.arttab {
  border-width: 0.33rem;
  border-radius: 2rem 2rem 0px 0px;
}
}


p {
  color: rgba(255, 255, 255, 1);
}

a {
  color: cyan;
}

a:visited {
  color: #7cfffa;
}

a:hover {
	color:magenta;
}

a:active {
	color:yellow;
}

body {
  background-color: #5A3C65;
  background-image:url("../media/angelbglow6.png");
  background-repeat:repeat;
  background-position:top center;
  color: white;
  font-family: Verdana;
  padding: 1%;
  font-size: 125%;
}

/* change all these div fonts to single headers and <p> and whatever */